import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import './UserLayout.css';

const UserLayout = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const path = location.pathname;
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [isMobile, setIsMobile] = useState(false);

  // 检测当前设备是否为移动端
  useEffect(() => {
    const checkIsMobile = () => {
      const mobile = window.innerWidth <= 768;
      setIsMobile(mobile);
      if (!mobile) {
        setSidebarOpen(true); // PC端默认展开
      } else {
        setSidebarOpen(false); // 移动端默认收起
      }
    };
    
    // 初始检测
    checkIsMobile();
    
    // 监听窗口大小变化
    window.addEventListener('resize', checkIsMobile);
    
    // 清理函数
    return () => window.removeEventListener('resize', checkIsMobile);
  }, []);

  // 退出登录函数
  const handleLogout = () => {
    // 清除本地存储的token和用户信息
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    // 跳转到登录页
    navigate('/login');
  };

  // 菜单项点击函数
  const handleMenuClick = (route) => {
    navigate(route);
    // 在移动端点击菜单项后自动收起侧边栏
    if (isMobile) {
      setSidebarOpen(false);
    }
  };

  // 切换侧边栏状态
  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <MainLayout>
      <div className="user-center-layout">
        {/* 侧边栏开关按钮 - 只在移动端显示 */}
        {isMobile && (
          <div className="sidebar-toggle" onClick={toggleSidebar}>
            {sidebarOpen ? '✕' : '☰'}
          </div>
        )}

        {/* 侧边栏 */}
        <div className={`user-sidebar ${sidebarOpen ? 'open' : 'closed'}`}>
          <h2 className="sidebar-title">个人中心</h2>
          <div className="sidebar-menu">
            <button 
              className={`sidebar-btn ${path === '/user/profile' ? 'active' : ''}`}
              onClick={() => handleMenuClick('/user/profile')}
            >
              <i className="icon-user"></i>
              个人资料
            </button>
            <button 
              className={`sidebar-btn ${path === '/user/passkey' ? 'active' : ''}`}
              onClick={() => handleMenuClick('/user/passkey')}
            >
              <i className="icon-key"></i>
              Passkey管理
            </button>
            <button 
              className={`sidebar-btn ${path === '/user/invitation-history' ? 'active' : ''}`}
              onClick={() => handleMenuClick('/user/invitation-history')}
            >
              <i className="icon-invitation"></i>
              邀请记录
            </button>
            <button 
              className={`sidebar-btn ${path === '/user/myDownload' ? 'active' : ''}`}
              onClick={() => handleMenuClick('/user/myDownload')}
            >
              <span className="stat-icon">⬇️ </span>
              我的下载
            </button>
            <button 
              className={`sidebar-btn ${path === '/user/upload' ? 'active' : ''}`}
              onClick={() => handleMenuClick('/user/upload')}
            >
              <span className="stat-icon">⬆️ </span>
              上传管理
            </button>
            <button 
              className="sidebar-btn logout-btn"
              onClick={handleLogout}
            >
              <i className="icon-logout"></i>
              退出登录
            </button>
          </div>
        </div>
        
        {/* 移动端侧边栏背景遮罩 */}
        {isMobile && sidebarOpen && (
          <div className="sidebar-overlay" onClick={() => setSidebarOpen(false)}></div>
        )}
        
        {/* 内容区域 */}
        <div className={`user-content-area ${sidebarOpen ? 'sidebar-open' : 'sidebar-closed'}`}>
          {children}
        </div>
      </div>
    </MainLayout>
  );
};

export default UserLayout; 